<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
</head>

<body>
<div class="container">
    <br>
    <h1>商品页面<small>&emsp;Product page</small></h1>
    <br>

    <form class="form-inline">
        <input type="text" name="name" placeholder="输入搜索的产品..." class="form-control" size="69">
        <input type="button" onclick="doSearch()" value="搜索" class="btn btn-primary">
        <input type="button" onclick="doAddUI()" value="添加商品" class="btn btn-primary">
    </form>

    <table class="table table-striped">
        <thead>
        <tr>
            <th><h4>编号</h4></th>
            <th><h4>产品</h4></th>
            <th><h4>描述</h4></th>
            <th><h4>创建时间</h4></th>
            <th><h4>&emsp;&emsp;操作</h4></th>
            <br>
        </tr>
        </thead>
        <tbody>
        <br>
        <tr th:each="g:${list}">
            <td th:text="${g.id}">null</td>
            <td th:text="${g.name}">null</td>
            <td th:text="${g.remark}">null</td>
            <td th:text="${#dates.format(g.createdTime, 'yyyy/MM/dd HH:mm')}">null</td>
            <td>
                <!--
                <a  th:href="@{/goods/doDeleteById/{id}(id=${g.id})}">delete</a>
                -->
                <button type="button" th:onclick="doDeleteById([[${g.id}]])" class="btn btn-danger">删除</button>
            </td>
            <td>
                <!-- <a th:href="@{/goods/doFindById/{id}(id=${g.id})}" class="btn btn-info">更改</a>-->
                <button type="button" th:onclick="doFindById([[${g.id}]])" class="btn btn-info">更改</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>

    function doFindById(id) {
        location.href = `http://localhost/goods/doFindById/${id}`;
    }

    function doSearch() {
        //console.log("doSearch()");
        //获取form表单中的数据
        let name = document.forms[0].name.value;
        //console.log("name",name);
        //定义url
        let url = `http://localhost/goods/doGoodsUIByName/${name}`;//rest
        //访问对应的url (这种形式的访问将来会改成异步)
        location.href = url;
    }

    function doDeleteById(id) {
        //给出提示信息
        if (!confirm("您确认删除吗")) return;//confirm为浏览器中window对象的函数
        //执行删除业务
        location.href = `http://localhost/goods/doDeleteById/${id}`;
    }

    function doAddUI() {
        location.href = "/goods/doGoodsAddUI";
    }

</script>
</body>
</html>